<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>郑煤机推移千斤顶综合测试平台</title>
		<link rel="icon" href="static/img/title_icon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="static/img/title_icon.ico" type="image/x-icon">
		<link rel="stylesheet" href="static/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app" class="content-wraper">
			<h2 class="title">
				<img src="static/img/logoMini.png">
				郑州煤矿机械集团
			</h2>
			<h3 class="title vice-title">
				油缸检测实验报告
			</h3>
			<!-- 摘要 -->
			<div class="item-wrap">
				<h5 class="vice-min-title">概要</h5>
				<table class="table" border="0">
					<tbody>
						<tr>
							<td>施工号</td>
							<td>{{ shiGongHao }}</td>
							<td>油缸编号</td>
							<td>2000</td>
						</tr>
						<tr>
							<td>类型</td>
							<td>平衡千斤顶</td>
							<td>检测结果</td>
							<td style="font-weight: bold;">合格</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 折线图 -->
			<div class="item-wrap">
				<h5 class="vice-min-title">压力数据</h5>
				<div class="canas-wraper d-flex">
					<div class="pre-canvas">
						<div id="echart-pre-wrap"></div>
					</div>
				</div>
			</div>
			<!-- 结果表格 -->
			<div class="item-wrap">
				<table class="table" border="0">
					<tbody id="pre-table">
						<tr>
							<td>部位</td>
							<td>压力值（Mpa）</td>
							<td>保压时长（s）</td>
							<td>压降（Mpa）</td>
						</tr>
						<tr><td>活塞杆腔</td><td>38.5</td><td>360</td><td>0.05</td></tr>
						<tr>
							<td>活塞腔</td>
							<td>39.52</td>
							<td>360</td>
							<td>0.03</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="tip">
				<p>
					<span>检测员：</span><span>李勇勇</span>
				</p>
				<p>
					<span>实验时间：</span><span>2020-12-12 12:25:26</span>
				</p>
			</div>
		</div>

		<script src="static/jquery.min.js"></script>
		<script src="static/echarts.min@4.9.0.js"></script>
		<script type="text/javascript">
			

			function echartOption(data) {
				const option = {
					grid: {
						left: '4%',
						right: '5%',
						top: '6%',
						bottom: '8%'
					},
					xAxis: {
						type: 'category',
						data: data.currentTime,
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: 80,
						splitNumber: 11
					},
					series: [{
							symbol: 'none',
							smooth: true,
							data: data.upPre,
							type: 'line'
						},
						{
							symbol: 'none',
							smooth: true,
							data: data.downPre,
							type: 'line'
						},
					]
				}
				return option
			}
			new Vue({
				el: '#app',
				data: {
					shiGongHao: 200
				},
				mounted() {
					let preChart = echarts.init(document.getElementById('echart-pre-wrap'));
					let options = echartOption(
						{
							currentTime: [1,2,3,3],
							upPre: [34,5,667,2],
							downPre: [2342,46,3,2,6]
						}
					)
					window.onresize = preChart.resize
					preChart.setOption(options)
					this.shiGongHao = '数据测试'
				},
				methods: {}
			})

			
		</script>
	</body>

</html>
